<template>
  <div>
  
    <group>
      <swiper :list="demo03_list" auto style="width:80%;margin:0 auto;" height="180px" dots-class="custom-bottom" dots-position="center"></swiper>
      <cell ></cell>
       
       
    </group><card></card>
  </div>
</template>

<script>
import { Group, Cell } from 'vux'
import { Swiper, GroupTitle, SwiperItem, XButton, Divider } from 'vux'
import card from './card.vue';
const imgList = [
  'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1507990170212&di=644446cfe82120ebb2ca970610676ded&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D7f35d820bc003af359b7d4235d43ac29%2F3b87e950352ac65c59de5e5af1f2b21193138a3b.jpg',
  'http://placeholder.qiniudn.com/800x300/FFEF7D/ffffff',
  'http://placeholder.qiniudn.com/800x300/8AEEB1/ffffff'
]

const demoList = imgList.map((one, index) => ({
  url: 'javascript:',
  img: one
}))


export default {
  components: {
    Group,
    Cell,
    Swiper,
    SwiperItem,
    GroupTitle,
    XButton,
    Divider,
    card
  },
  data () {
    return {
      // note: changing this line won't causes changes
      // with hot-reload because the reloaded component
      // preserves its current state and we are modifying
      // its initial state.
      msg: 'Hello World!',
 demo03_list: demoList,         
    }
  }
}
</script>

<style>
.vux-demo {
  text-align: center;
}
.logo {
  width: 100px;
  height: 100px
}
</style>
